<template>
  <div class="page notice-detail">
    <wi-navbar title="告知书签收" />
    <!-- 主体内容区 -->
    <div class="content">
      <div class="content-inner">
        <div class="notice-title">{{ title }}</div>
        <div class="body">
          <div class="body-inner" v-html="content" />
        </div>
      </div>
    </div>
    <div class="bottom-button">
      <van-button type="primary" round color="#3951ED" @click="sign" size="large">签 收</van-button>
    </div>
    <van-popup round v-model="signShow" closeable :close-icon="closeIcon" position="bottom">
      <van-form ref="vanForm" class="popup">
        <div v-if="type == 1" class="title title_re">企业名称</div>
        <van-field
          v-if="type == 1"
          v-model="form.enterpriseName"
          maxlength="200"
          placeholder="请输入企业名称"
          :rules="[{ validator: checkName, message: '请输入企业名称1' }]"
        />
        <div class="title title_re">签收人</div>
        <van-field
          v-model="form.signer"
          placeholder="请输入签收人"
          maxlength="25"
          :rules="[{ required: true, message: '请输入签收人' }]"
        />
        <div class="title title_re">联系电话</div>
        <van-field
          v-model="form.phone"
          placeholder="请输入联系电话"
          maxlength="12"
          :rules="[
            { required: true, message: '请输入联系电话' },
            { validator: checkTel, message: '请输入正确的联系电话' }
          ]"
        />
      </van-form>
      <div class="prop-bottom-button">
        <van-button
          type="primary"
          native-type="submit"
          round
          color="#3951ED"
          @click="submit"
          size="large"
          >确 定</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getDetail, save } from '@/api/notice/index'
import { Notify } from 'vant'
export default {
  data() {
    return {
      title: '', //标题
      content: '', //内容
      type: '1', //区分，个人or企业
      signShow: false, //签收对话框
      closeIcon: require('@/assets/images/close.png'),
      form: {
        notificationId: '', //告知书Id
        notificationName: '', //告知书名称
        enterpriseName: '', //签收企业
        signer: '', //签收人
        phone: '', //签收电话
        notificationRecordId: '' //告知书记录id
      }
    }
  },

  created() {
    this.getDetail()
  },

  methods: {
    sign() {
      this.signShow = true
    },
    checkTel(val) {
      if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(val)) {
        return true
      } else {
        return false
      }
    },
    checkName(val) {
      if (val) {
        return true
      } else {
        return false
      }
    },
    submit() {
      this.$refs['vanForm']
        .validateAll()
        .then(res => {
          // 提交请求
          save(this.form).then(res => {
            if (res && res.success) {
              Notify({ message: '提交成功', type: 'success' })
              this.signShow = false
              //this.$router.go(-1)
            } else {
              Notify({ type: 'danger', message: res.message })
            }
          })
        })
        .catch(err => {
          console.log(err)
        })
    },
    getDetail() {
      const id = this.$route.query.id
      getDetail({
        id: id
      })
        .then(res => {
          if (res && res.success) {
            this.form.notificationId = res.result.id
            this.form.notificationName = res.result.notificationName
            this.title = res.result.notificationName
            this.content = res.result.notificationContent
            this.type = res.result.informType
            this.form.notificationRecordId = res.result.notificationRecordId
          } else {
            Notify({ message: res.message, type: 'danger' })
          }
        })
        .finally(() => {})
    }
  },
  mounted() {}
}
</script>

<style lang="css" scoped>
.navbar {
  margin-bottom: 10px;
}
.content {
  height: calc(100vh - 150px);
  overflow: auto;
  width: 100%;
  background: #fff;
}
.content-inner {
  padding: 27.5px 20px;
}
.notice-title {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 25px;
}
.body {
  margin-top: 14px;
  border-top: 1px solid #efefef;
}
.body-inner {
  margin-top: 13px;
}
.bottom-button {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 30px 12px;
  background: #fff;
}

.van-button--large {
  height: 40px;
}
.van-button--round {
  border-radius: 21px;
}
.van-cell {
  padding: 0;
}

.van-popup--bottom.van-popup--round {
  border-radius: 20px 20px 5px 5px;
}

.popup {
  box-sizing: border-box;
  padding: 30px 29px;
}

.title {
  margin-top: 17px;
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 16px;
}

.title:first-child {
  margin-top: 0;
}

.title_re::after {
  content: '*';
  color: red;
  line-height: 17px;
  margin-left: 5px;
  display: inline-block;
}

.prop-bottom-button {
  box-sizing: border-box;
  width: 100%;
  bottom: 0;
  padding: 0 12px 30px 12px;
  background: #fff;
}
</style>
